{% extends 'profileapp/profile/base_cabinet_index.html' %}
{% load static %}

{% block title %}{{ title }}{% endblock %}
{% block styles %}
    <link rel="stylesheet" href="{% static 'ProfileApp/css/services.css' %}">
{% endblock %}
{% block content %}
<div class="container">
    <div class="column">
        <h2>Таблица услуг</h2>
        <table class="table">
            <tr>
                <th>Имя</th>
                <th>Описание</th>
                <th>Цена</th>
                <th>Опции</th>
            </tr>
            {% for serv in service %}
                <tr>
                    <td>{{ serv.name }}</td>
                    <td>{{ serv.description }}</td>
                    <td>{{ serv.price }}</td>
                    <td>
                        <a href="{% url 'profile:edit_service' serv.id %}">
                            <button class="btn btn-success">
                              <i class="bi bi-cart-fill"></i> edit
                            </button>
                        </a>

                        <a href="{% url 'profile:delete_serv' serv.id %}">
                            <button class="btn btn-danger">
                              <i class="bi bi-cart-fill"></i> dell
                            </button>
                        </a>
                    </td>
                </tr>
            {% endfor %}
        </table>
    </div>
    <div class="column">
        <h2>Добавить новую услугу</h2>
        <div class="form">
            <form action="{% url 'profile:services' %}" method="post">
                {% csrf_token %}
                <p>{{ form.name.label_tag }}
                    {{ form.name }}</p>
                <p>{{ form.description.label_tag }}
                    {{ form.description }}</p>
                <p>{{ form.user_count.label_tag }}
                    {{ form.user_count }}</p>
                <p>{{ form.price.label_tag }}
                    {{ form.price }}</p>
                <button type="submit">Добавить</button>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function() {
            // Обрабатываем клик на кнопке "Edit"
            $('.btn-edit-service').click(function() {
                var serviceId = $(this).data('service-id');
                // Здесь можно выполнить дополнительные действия с ID услуги, например, передать его в модальное окно
                // Например, можно установить его в атрибут data-service-id модального окна
                $('#editServiceModal').data('service-id', serviceId);
            });
        });
    </script>
    <script>
        function addService() {
            const serviceName = document.getElementById('service-name').value;
            const serviceDescription = document.getElementById('service-description').value;
            const servicePrice = document.getElementById('service-price').value;

            // Добавьте код для создания новой строки в таблице с введенными данными услуги
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% endblock %}